<template>
	<div>
		<InputOutputDefine
			:versionId="props.id"
			:stepCode="props.nodeId"
			:topFlag="false"
			:getResource="getResource"
			:inputFlag="false"
			:outputFlag="true"
		>
		</InputOutputDefine>
		<!-- <a-tabs v-if="props.componentConfig.config" v-model:activeKey="props.componentConfig.config.activeKey"> -->
		<!-- <a-tab-pane key="1" tab="config"> -->
		<a-row class="mb-2">
			<a-col span="4"> 分组:{{ props.componentConfig.config?.group?.groupName }}</a-col>
			<a-col span="4"> 流程:{{ props.componentConfig.config?.process?.processName }}</a-col>
			<a-col span="4"> 版本:{{ props.componentConfig.config?.process?.processVersion }}</a-col>
			<a-col span="4">
				<span>异步执行: </span>
				<a-switch v-model:checked="props.componentConfig.config.asyncFlag"></a-switch>
			</a-col>

		</a-row>
		<a-row>
			<a-col span="24">
				<ProcessChosen :groupCallback="groupCallback"
							   :processVersionCallback="processVersionCallback"></ProcessChosen>
			</a-col>
		</a-row>

		<a-row>
			<a-col span="24">
				<ParamMapping
					v-if="props.componentConfig?.config?.output && inputDefine"
					:leftData="inputDefine"
					:rightData="props.componentConfig?.config?.output"
					ref="left"
				></ParamMapping>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import {onMounted, ref, watch, toRaw, inject, getCurrentInstance} from 'vue'
import * as monaco from 'monaco-editor'
import processVersionContentApi from '@/api/process/processVersionContentApi'
import ProcessChosen from '@/views/process/ProcessChosen.vue'
import {message} from 'ant-design-vue'
import ParamMapping from '@/views/restapi/ParamMapping.vue'
import InputOutputDefine from './InputOutputDefine.vue'

const props = defineProps(['componentConfig', 'nodeId', 'id', 'frontFile'])

const defaultConfig = () => {
	return {
		config: {
			asyncFlag: false,
			group: {
				groupId: null,
				groupName: null,
				groupCode: null
			},
			process: {},
			output: {
				params: [],
				basicTypeFlag: false,
				isArrayFlag: false,
				isActionColumnFlag: true,
				isMappingColumnFlag: true,
				isViewAutoMappingFlag: true,
				isUpdateColumnFlag: true,
				isClearFlag: true,
				jsonEditorFlag: true
			}
		}
	}
}

const inputDefine = ref({
	params: [],
	basicTypeFlag: false,
	isArrayFlag: false
})

const groupCallback = (data) => {
	props.componentConfig.config.group = data
}
const processVersionCallback = (data) => {
	if (data.processVersionId == props.id) {
		message.info('不能选择当前流程')
		return
	}

	props.componentConfig.config.process = data
	getInputEventDefine()
}

const getInputEventDefine = async () => {

	//获取frontFile
	let processVersionInfo = await processVersionContentApi.getById({
		id: props.componentConfig.config.process.processVersionId
	});
	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getProcessEventInputDefine({
		id: props.componentConfig.config.process.processVersionId,
		frontFile: JSON.parse(processVersionInfo.frontFile)
	})
	props.componentConfig.config.output = {
		...read,
		isActionColumnFlag: true,
		isMappingColumnFlag: true,
		isViewAutoMappingFlag: true,
		isUpdateColumnFlag: true,
		isClearFlag: true,
		jsonEditorFlag: true
	}
}
onMounted(async () => {
	if (!hasProperties(props.componentConfig)) {
		const c = defaultConfig()
		props.componentConfig.config = c.config
	}

	const c = await getInputDefine()
	inputDefine.value = c
	console.log(c)
})

const hasProperties = (obj) => {
	if (!obj) {
		return false
	}

	return JSON.stringify(obj) != '{}'
}

const getInputDefine = async () => {
	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getCurrentInputDefine({
		id: props.id,
		frontFile: props.frontFile,
		stepCode: props.nodeId
	})
	return read
}
const getResource = () => {
	let frontFile = mergeStepConfigToFrontFile(props.frontFile, props.nodeId, props.componentConfig)
	return frontFile
}
</script>


<style scoped></style>
